<template>
  <div class="address-list">
    <CommonBack :title="title"></CommonBack>
    <div v-if="list.length !== 0">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        @select="selectAddr"
      />
    </div>
    <div v-else class="empty">
      <!-- 空状态 -->
      <van-empty
        description="您还没有添加收货地址~~~"
      />
      <van-button type="danger" @click="addAddress">新增地址</van-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import CommonBack from "@/components/CommonBack.vue";
import { Toast } from "vant";
export default {
  name: "AddressList",
  data() {
    return {
      title: "收货地址",
      chosenAddressId: 1,
      // list:[]
    };
  },
  computed:{
    ...mapState({
      list:state => state.address.address
    })
  },
  methods: {
    firstCreate() {
      this.$store.commit("changeTabShow");
      // console.log(this.list);
    },
    onAdd() {
      this.$router.push({
        path: `/addressEdit/add`,
      });
    },
    onEdit(item, index) {
      console.log(item, "edit");
      this.$router.push({
        path: `/addressEdit/edit`,
      });
      sessionStorage.setItem("addressItemEdit", JSON.stringify(item));
    },
    selectAddr(item) {
      Toast.loading();
      setTimeout(() => {
        this.$router.push({
          path: "/cart",
        });
        sessionStorage.setItem("addressList", JSON.stringify(item));
        Toast.clear();
      }, 500);
    },
    addAddress(){
      this.$router.push({
        path:`/addressEdit/add`
      })
    }
  },
  created() {
    this.firstCreate();
  },
  components: {
    CommonBack,
  },
  destroyed() {
    this.$store.commit("changeTabShow");
  },
};
</script>

<style lang="less" scoped>
.address-list {
  padding-top: 46px;
  /deep/ .van-button--danger{
    width: 90%;
    border-radius: 25px;
    position: fixed;
    left: 1rem;
    bottom: 1rem;
  }
  /deep/ .van-address-list__bottom{
    display: flex;
    justify-content: center;
  }
}
</style>